<template>
    <div class="exclusive">
        <div class="head">
          <div class="title">独家放送</div>
          <div class="more">更多></div>
        </div>
        <!--独家放送-->
        <div class="main">
          <div class="privatecontent_resource" 
          v-for="(item,index) in privatecontent" 
          :key="index"
          @click="getPlayListDetail(item.id)"
          > 
            <div class="iconfont  iconshipin playLogo"></div>
            <img :src="item.picUrl" alt="">
            <div class="name">{{item.name}}</div>
          </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'exclusive',
    props: [
        'privatecontent'
    ],
    data() {
        return {

        };
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {

    },
    methods: {

    },
    components: {

    },
};
</script>

<style scoped lang="less">
@itemecolor:#c62f2f;
@more:#ccc;
@title:20px;
.position_flex(@jc:space-between,@ai:center){
  display: flex;
  align-items: @ai;
  justify-content: @jc;
}
.exclusive{
    .head{
    .position_flex;
    height: 40px;
    border-bottom: 1px solid;
    .title{
      font-size: @title;
    }
    .more{
      color: @more;
    }
  }
    .main{
        .position_flex;
        .privatecontent_resource{
        width: 32%;
        height: 250px;
        margin-top: 20px;
        position: relative;
        cursor: pointer;
        img{
            width: 100%;
            height: 200px;
        }
        .playLogo{
            position: absolute;
            top:5px;
            left: 5px;
        }
        .songListName{
            line-height: 25px;
        }
        }
    }
}
</style>
